<template>
  <el-dialog
    title="地图"
    :visible.sync="dialogVisible"
    width="906px"
    :before-close="handleClose"
    class="material"
  >
    <div class="map-main">
      <div class="map-search">
        <el-input v-model="mapKey" size="small" placeholder="请输入内容">
          <template slot="append">
            <el-button size="small" @click="searchKeyword">搜索</el-button>
          </template>
        </el-input>
      </div>
      <div class="map-par">
        <GDmap
          :type="'Marker'"
          style="margin-top:20px;"
          :datas="{ search: search }"
          :heights="426"
          :widths="878"
          @retunrData="retunrData"
        />
      </div>
    </div>
    <div class="icon-footer">
      <el-button size="small" @click="handleClose">取 消</el-button>
      <el-button size="small" type="primary" @click="add">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>
/* eslint-disable no-undef */
export default {
  components: {
    GDmap: r => require.ensure([], () => r(require("publicCom/GDmap")), "GDmap")
  },
  props: {
    mapval: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      dialogVisible: true,
      mapKey: "",
      search: "",
      jsons: "",
      x: "",
      y: ""
    };
  },
  watch: {},

  mounted() {
    // this.$nextTick(() => {
    //   var that = this
    //   var marker
    //   var center = new qq.maps.LatLng(39.916527, 116.397128)
    //   var map = new qq.maps.Map(document.getElementById('container'), {
    //     center: center,
    //     zoom: 13
    //   })
    //   // 获取城市列表接口设置中心点
    //   this.citylocation = new qq.maps.CityService({
    //     complete: function (result) {
    //       map.setCenter(result.detail.latLng)
    //       if (marker != null) {
    //         marker.setMap(null)
    //       }
    //       that.x = result.detail.latLng.lat
    //       that.y = result.detail.latLng.lng
    //       that.mapKey = result.detail.name
    //       marker = new qq.maps.Marker({
    //         map: map,
    //         position: result.detail.latLng
    //       })
    //       that.markers.push(marker)
    //     }
    //   })
    //   this.mapKey = this.mapval
    //   var latlngBounds = new qq.maps.LatLngBounds()
    //   this.citylocation.searchLocalCity()
    //   this.searchService = new qq.maps.SearchService({
    //     complete: function (results) {
    //       var pois = results.detail.pois
    //       that.x = pois[0].latLng.lat
    //       that.y = pois[0].latLng.lng
    //       if (that.index === 1) {
    //         that.mapKey = pois[0].name
    //       }
    //       for (var i = 0, l = pois.length; i < l; i++) {
    //         var poi = pois[i]
    //         latlngBounds.extend(poi.latLng)
    //         marker = new qq.maps.Marker({
    //           map: map,
    //           position: poi.latLng
    //         })
    //         if (that.markers) {
    //           for (i in that.markers) {
    //             that.markers[i].setMap(null)
    //           }
    //         }
    //         marker.setTitle(i + 1)
    //         that.markers.push(marker)
    //       }
    //       map.fitBounds(latlngBounds)
    //     }
    //   })
    // })
  },

  created() {
    if (this.mapval) {
      this.mapKey = this.mapval;
      this.search = this.mapval;
    }
  },
  methods: {
    handleClose() {
      this.$emit("close");
    },
    retunrData(e) {
      this.jsons = {
        x: e.lat,
        y: e.lng,
        address: this.mapKey
      };
    },
    searchKeyword() {
      this.search = this.mapKey;
    },
    add() {
      if (!this.jsons.x) return this.$message.error("请选取地址！");
      this.$emit("addsMap", this.jsons);
    }
  }
};
</script>

<style scoped>
.map-main {
  position: relative;
  padding: 15px;
  min-height: 500px;
}

.map-search {
  position: absolute;
  width: 300px;
  top: 10px;
  left: 16px;
  text-align: center;
}

#container {
  min-width: 600px;
  min-height: 407px;
  margin-top: 40px;
}
.map-par {
  margin-top: 42px;
}
</style>
